@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind screens;

@layer components {


  .float {
    display: flow-root;

    &::after {
      display: block;
      content: ' ';
      clear: both;
    }
  }

  .flex {
    &--center {
      @apply flex justify-center items-center;

      &--v {
        @apply flex items-center;
      }

      &--h {
        @apply flex justify-center;
      }
    }

    &--col {
      @apply flex flex-col;
    }

    &--sb {
      @apply flex justify-between;

      &--col {
        @apply flex justify-between flex-col;
      }
    }

    &--sa {
      @apply flex justify-around;
    }

    &--se {
      @apply flex justify-evenly;
    }

    &--wrap {
      @apply flex flex-wrap;
    }

    &__item {
      &--1 {
        flex: 1;
      }

      &--2 {
        flex: 2;
      }

      &--3 {
        flex: 3;
      }
    }
  }

  .box {

    // 正方形盒子
    &--square {
      position: relative;
      padding-left: 100%;
      padding-top: 100%;
      width: 0;
    }
  }

  .text {
    #ellipsis() {
      overflow: hidden;
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      color: currentColor;
    }

    // 文字两行超出显示省略号
    &--ellipsis {
      #ellipsis();

      // 文字单行超出显示省略号
      &--1 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      // 文字三行超出显示省略号
      &--3 {
        #ellipsis();
        -webkit-line-clamp: 3;
      }
    }
  }

  .image {

    // 图片拉伸
    &--stretch {
      width: 100%;
      height: 100%;

      &--abs {
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        width: 100%;
        height: 100%;
      }
    }

    // 清除图片边距
    &--clear {
      vertical-align: middle;
      line-height: 1;
    }
  }

  .scroll {

    // 滚动盒子尾部填充 防止最后的一个盒子边距失效
    &__fill {
      &::after {
        display: block;
        content: '';
        min-width: 0.1px;
      }
    }

    &__bar {

      // 滚动条清除
      &--clear {
        scrollbar-width: none;

        &::-webkit-scrollbar {
          display: none;
          /* Chrome Safari */
        }
      }
    }
  }
}